<template>
  <a-modal
    title="文章推荐"
    width="70%"
    :height="500"
    :maskClosable="false"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-tabs v-model="defkey" @change="tabChange">
        <a-tab-pane key="1" tab="待选推荐">
          <a-card :bordered="false">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="48">
                  <a-col :md="6" :sm="24">
                    <a-form-item label="标题">
                      <a-input v-model="queryParam.dto.title" placeholder />
                    </a-form-item>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                      <a-button type="primary" @click="$refs.table.refresh(true)">
                        <a-icon type="search" />查询</a-button>
                      <a-button style="margin-left: 8px" @click="resetSearchForm()">
                        <a-icon type="loading-3-quarters" />重置</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form>
            </div>

            <a-row :gutter="24">
              <a-col :md="4">
                <div style="border:1px dashed #e8e8e8">
                  <a-tree @select="onSelect" showIcon :treeData="treeData" :defaultSelectedKeys="defaultSelectedKeys" />
                </div>
              </a-col>
              <a-col :md="19">
                <s-table
                  ref="table"
                  size="small"
                  bordered
                  rowKey="id"
                  :columns="columns0"
                  :data="loadData"
                  :locale="{emptyText: '暂无内容'}"
                  :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange:onSelectChange }">
                  >
                  <span slot="status" slot-scope="state, record">
                    <template>
                      <a-tag color="orange" v-if="state == '0' ">草稿 {{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
                      <a-tag color="red" v-if="state == '1' ">已发布{{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
                      <a-tag color="red" v-if="state == '2' ">已删除{{ record.checkUserName ? '/' +record.checkUserName:'' }}</a-tag>
                    </template>
                  </span>

                  <span slot="titleData" slot-scope="text">
                    <template>
                      <span v-html="$substr(text,8)"></span>
                    </template>
                  </span>
                </s-table>
              </a-col>
            </a-row>
            <top-handle ref="topHandle" @ok="handleOk" />

          </a-card>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已选推荐" force-render>
          <a-table :columns="columns" :dataSource="data" size="small" bordered>
            <span slot="action" slot-scope="text, record">
              <template>
                <a-tag color="red" v-action:content:relateddel @click="handleDelete(record)">移除</a-tag>
              </template>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import topHandle from './topHandle'
  import {
    treeCategory,
    page,
    listRelated,
    saveRelatedBath,
    deleteRelated
  } from '@/api/site/content'
  import {
    STable
  } from '@/components'
  export default {
    name: 'TableList',
    components: {
      STable,
      topHandle
    },
    props: {
      statusFilter: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        mdl: {},
        advanced: false,
        allowContribute: true,
        treeData: [],
        selectedRowKeys: [],
        selectedRows: [],
        defaultSelectedKeys: ['0'],
        selectTreObj: {},
        data: [],
        visible: false,
        confirmLoading: false,
        defkey: '1',
        record: null,
        queryParam: {
          dto: {
            categoryId: '0',
            status: '1'
          }
        },
        columns0: [{
            title: '标题',
            dataIndex: 'title',
            width: 160,
            scopedSlots: {
              customRender: 'titleData'
            }
          },
          {
            title: '分类',
            dataIndex: 'categoryName'
          },
          {
            title: '模型',
            dataIndex: 'modelName'
          },
          {
            title: '状态/发布人',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '置顶级别',
            dataIndex: 'sort'
          },
          {
            title: '发布日期',
            align: 'center',
            dataIndex: 'publishDate',
            customRender: data => {
              if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
            }
          }
        ],
        columns: [{
            title: '标题',
            dataIndex: 'title',
            width: 160,
            scopedSlots: {
              customRender: 'titleData'
            }
          },
          {
            title: '分类',
            dataIndex: 'categoryName'
          },
          {
            title: '模型',
            dataIndex: 'modelName'
          },
          {
            title: '状态/发布人',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '置顶级别',
            dataIndex: 'sort'
          },
          {
            title: '发布日期',
            align: 'center',
            dataIndex: 'publishDate',
            customRender: data => {
              if (data) return moment(data).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            width: '300px',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        loadData: parameter => {
          return page(Object.assign(parameter, this.queryParam)).then(
            response => {
              return response.res
            }
          )
        }
      }
    },
    created () {
      this.treeCategory()
    },
    methods: {
      open (record) {
        this.record = record
        this.visible = true
      },
      listRelated () {
        console.log('----------start--------')
         listRelated({ contentId: this.record.id }).then(response => {
           if (response.code === 0) {
              this.data = response.res
           }
         })
      },
      treeCategory () {
        treeCategory().then(response => {
          if (response.code === 0) {
            this.treeData = [response.res]
          }
        })
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleDelete (record) {
          console.log(record)
          deleteRelated({ id: record.id }).then(response => {
            if (response.code === 0) {
               this.listRelated()
            }
          })
      },
      handleOk () {
        this.$refs.table.refresh()
        this.selectedRowKeys = []
        this.selectedRows = []
      },
      onSelect (selectedKeys, e) {
        this.selectTreObj = e.node.dataRef
        this.queryParam.dto.categoryId = e.node.dataRef.id
        this.handleOk()
        if (e.node.dataRef.attributes) {
          this.allowContribute = e.node.dataRef.attributes.allowContribute
        }
      },
      handleSubmit () {
        if (this.selectedRows.length === 0) {
          this.$message.error('没有选择任何推荐信息!')
          return
        }
        const _this = this
        const relateds = []
        this.selectedRows.forEach(function (item, index) {
           relateds.push({ contentId: _this.record.id, relatedCid: item.id })
        })
        if (this.defkey === '2') {
           this.handleCancel()
        } else {
          saveRelatedBath(relateds).then(response => {
             if (response.code === 0) {
                this.defkey = '2'
                this.listRelated()
             }
          })
        }
        // this.$emit('ok', this.selectedRows)
        // this.handleCancel()
      },
      tabChange (key) {
        if (key === '2') {
           this.listRelated()
        }
      },
      handleCancel () {
        this.visible = false
        this.selectedRowKeys = []
        this.selectedRows = []
        this.defkey = '1'
      },
      resetSearchForm () {
        this.queryParam = {
          dto: {
            categoryId: '0',
            status: '1'
          }
        }
        this.selectTreObj = {}
        this.handleOk()
      }
    }
  }
</script>
